<template>
    <div>
        <div  style="background-color:#eae9e5;display: flex;justify-content: space-around;align-items: center;">
            <div @click="reMySetup" style="padding: 20px 20px 20px 0;font-size:12px;margin-left: -5%;"  span="9">取消</div>
            <div style="font-weight:1000;padding: 20px 20px 20px 20px" span="10">信息编辑</div>
            <div @click="reMySetup" style="padding: 20px 0 20px 20px;font-size:12px;" span="5">保存</div>
        </div>
        <div  @click="showPopup" style="text-align:center;margin-top: 10%;">
            <van-image
            round
            width="7rem"
            height="7rem"
            src="https://img0.baidu.com/it/u=1282950828,2044589337&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=490"
            /></div>
            <div style="text-align:center;margin-top: 5%;color:#c1ab96;font-size: 12px;">更改头像</div>
            <div style="border-bottom:1px #eae9e5 solid;width: 90%;margin-left: 5%;padding: 15px 0 15px 0;font-size: 15px;" >
                    <span  style="padding:0 13% 0 0">昵称</span><input  v-model="value"  placeholder="请输入用户名"  style="border:none"/>
            </div>
            <div style="font-size: 15px;border-bottom:1px #eae9e5 solid;width: 90%;margin-left: 5%; padding: 15px 0 15px 0;">
                <span>会员ID</span><span style="margin-left:10%;color: darkgray;">69193216412001</span>
            </div>
            <div style="color:#eae9e5;text-align: center;font-size: 12px;margin-top: 67%;">BY OMINI.BASS</div>
            
            <van-popup
            style="background-color:#000000"
            v-model:overlay="overlay"
            duration="0.5"
            v-model:show="show"
            closeable
            close-icon="close"
            position="bottom"
            :style="{ height: '100%' }"
            />
            <van-popup
            v-model:show="show"
            v-model:overlay="overlay"
            position="top"
            >
                <div 
                style="display:flex;
                justify-content: space-between;
                padding: 3% 0 3% 0;
                background-color: #000000;
                color: white;
                width: 100%;
                ">   
                    <div  @click="showPopup"><van-icon name="arrow-left" size="20"/>所有照片及视频</div>
                    <button
                    @click="showPopup" 
                    style="background-color:#c1ab96;
                    width: 67px;height: 30px;
                    border-radius: 5px;
                    ">完成</button>
                </div>
                <div style="background-color: #000000;border: none;padding: 10px;">
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img0.baidu.com/it/u=1282950828,2044589337&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=490"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img1.baidu.com/it/u=3895489327,2058581139&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img2.baidu.com/it/u=769633489,863861704&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img2.baidu.com/it/u=1261323646,1888852257&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img1.baidu.com/it/u=999537892,4263672259&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img1.baidu.com/it/u=3315604911,484903301&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img0.baidu.com/it/u=2572749404,2358787787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img2.baidu.com/it/u=2371151262,2350424582&fm=253&fmt=auto&app=138&f=JPEG?w=452&h=500"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img0.baidu.com/it/u=1852170828,3171099190&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img0.baidu.com/it/u=2670416143,2940854806&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img1.baidu.com/it/u=2813198016,1637799007&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
                    />
                    <van-image
                    style="margin:5px"
                    width="7rem"
                    height="7rem"
                    src="https://img1.baidu.com/it/u=2797559999,208069833&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
                    />
                   
                </div>
            <div style="height:20px;background-color: #000000;"></div>
                <div 
                style="background-color:black;
                color: white;
                ">图片及视频◢</div>
            </van-popup>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import {useRouter} from 'vue-router';
    const $router = useRouter();
    const value = ref('OMINI.BASS');

    const show = ref(false);
    const overlay = ref(false);
    const lazy = ref(false);

    const showPopup = () => {
        overlay.value = false;
        lazy.value = false;
        if(show.value == true){
            show.value = false;
        }else{
            show.value = true;

        }
    };
    // ref(
    //   show,
    // //   overlay
    //   )
    //   showPopup()
      

     //取消个人信息编辑
     function reMySetup(){
        $router.push({path:"setUp"})
        console.log(1111);
    } ;
</script>